import React from 'react';
import './index.less';
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';
import { List, Button ,Picker, InputItem, WhiteSpace } from 'antd-mobile';
const ListItem = List.Item;

const byStagesData = [
    {value:'3个月',label:'3个月'},
    {value:'6个月',label:'6个月'},
    // {value:'9个月',label:'9个月'},
    {value:'12个月',label:'12个月'},
    {value:'24个月',label:'24个月'},
    // {value:'36个月',label:'36个月'},

]

const purpose = [
    {value:'购车',label:'购车'},
    {value:'装修',label:'装修'},
    {value:'医疗',label:'医疗'},
    {value:'旅游',label:'旅游'},
]


const cardNum = [
    {value:'622334****4431',label:'622334****4431'},
    {value:'613354****1451',label:'613354****1451'},
    {value:'623234****9873',label:'623234****9873'},
]


class HmdMain extends React.Component { 
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);

        this.state={ 
            hmdData:{
               month:byStagesData[0].value,
               purpose:purpose[0].value,
               cardCode:'623343****4321',
               dueDate:'每月1号',
               endDate:'2019-01-20',
            },
        }
    }

    componentDidMount(){ 
        //初始化
    }

    calPlan=()=>{ 
        //跳转还款计划
          this.context.router.push({
		 	pathname: '/Schedules',
		 	query:{
            	itemNums: 6
            }
           })
    }

    //提交数据
    btnClick=()=>{ 
        // localStorage.setItem('hmdData',JSON.stringify(this.state.hmdData));
        //跳转下个页面
        this.context.router.push({
			pathname: '/HmdMain/HmdMainTools'
        })
    }

    setData=(val,str)=>{ 
        let data;
        if(str=="month"){ 
            let date='';
            if(val[0]=='3个月'){ 
                date='2019-01-20';
            }else if(val[0]=='6个月'){
                date='2019-04-20';
            }else if(val[0]=='12个月'){ 
                date='2019-10-20';
            }else if(val[0]=='24个月'){ 
                date='2020-10-20';
            }
            data = Object.assign(this.state.hmdData,{month:val[0],endDate:date});

        }else if(str=="purpose"){ 
            data = Object.assign(this.state.hmdData,{purpose:val});
        }else if(str=="cardCode"){ 
            data = Object.assign(this.state.hmdData,{cardCode:val[0]});
        }else if(str=="money"){ 
            data = Object.assign(this.state.hmdData,{money:val});
        }
        this.setState({ 
            hmdData:data,
        })
        console.log(this.state);
    }

    render() {
        
        return (
            <div className="hmd_main_apply">
           		<CommonHeader 
					name='信用贷款度提取'					
					leftContentTitle="@back" 
					leftContent='返回'
				/>
				<div style={{height:'.9rem'}}></div>
                
                <div className="hmd_apply_top">
                    <div className="hmd_apply_top_title">恭喜您! 本次可借额度为</div>
                    <div className="hmd_apply_top_money">￥20,000.00元</div>
                </div>

                <div className="hmd_apply_middle">
                    <div className="hmd_apply_middle_title">您想借多少</div>
                    <List>
                        <InputItem
                        type="digit"
                        moneyKeyboardAlign="left"
                        // defaultValue={123543}
                        placeholder="请输入金额"
                        onChange={val => this.setData(val,'money')}
                        >￥</InputItem>
                    </List>
                    <Picker 
						data={byStagesData}
						extra = {this.state.hmdData.month}
						cols="1"  
						onOk = {val=>this.setData(val,'month')}
					>
			          <ListItem arrow="horizontal" >借多久</ListItem> 
			        </Picker>
                    <InputItem
			            value="百分之8.05"
			            editable={false}
			          >年利率</InputItem>
                    <div className="hmd_apply_middle_info">
                        <div className="hmd_apply_middle_info_down">
                            <div> 
                                <span>还款计划</span>
                                <span>每月等额还款</span>
                                <span className="span_last" onClick={this.calPlan}>查看详情</span>
                            </div>
                            <div> 
                                <span>到期日</span>
                                <span>{this.state.hmdData.endDate}</span>
                            </div>
                            <div> 
                                <span>还款日</span>
                                <span>{this.state.hmdData.dueDate}</span>
                            </div>
                            {/* <div>
                                <span>放款卡号</span>
                                <span>{this.state.hmdData.cardCode}</span>
                            </div> */}
                        </div>
                    </div>

                     <List className="hmd_apply_bottom">
                        <Picker
                        title="放款/还款卡号"
                        extra={this.state.hmdData.cardCode}
                        cols="1"  
                        data={cardNum}
                        onOk={val => this.setData(val,'cardCode')}
                        ><ListItem arrow="horizontal">放款/还款卡号</ListItem>
                        </Picker>
                    </List>
                </div>

                <List className="hmd_apply_bottom">
                    <Picker
                    title="贷款用途"
                    extra={this.state.hmdData.purpose}
                    cols="1"  
                    data={purpose}
                    onOk={val => this.setData(val,'purpose')}
                    ><ListItem arrow="horizontal">贷款用途</ListItem>
                    </Picker>
                </List>

                {/* <div className="hmd_apply_bottom_agree">
                    <span>提示:</span>
                    <span>本合同项下贷款用途符合国家法律法规,监管部门和交行政策规定,仅用于消费,不用于购买房产,生产经营,偿还贷款或其他债务,不用于股票,期货和其他金融衍生物交易,股本权益性投资或借贷,并配合交行对贷款用途的审查,按要求提交贷款用途证明材料.</span>
                    <span>贷款利益以《个人借款合同》为准.日利率根据央行最新发布的贷款基准利率试算.</span>
                </div> */}

                {/*<div className="hmd_apply_btn">*/}
                    {/*<Button type="primary" inline className="form_btn" onClick={this.btnClick}>确认提取</Button>*/}
                {/*</div>*/}
                <WhiteSpace size="lg" />
                <div className="btnGroup-one">
                    <Button type="primary" className="btnGroup-one-btn"
                            onClick={this.btnClick}>确认提取</Button>
                </div>
            </div>
        );
    }
}
export default HmdMain;